<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue-2.6.7.js"></script>
</head>
<body>
<div id="app">
<h1>Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染</h1>
    <h2>    那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。<br>

    因为两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder。</h2>
    <h2>解决input重用问题，添加key值</h2>
    <template v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username" key="username">
    </template>
    <template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address" key="userelmail">
    </template>
</div>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            loginType:"username"
        }
    })
</script>
</body>
</html>